<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
		<title>实现Tab组件</title>
		<style type="text/css">
			ul {
				padding-left: 0;
				margin: 0;
			}
			
			.tab-item {
				display: inline-block;
				list-style: none;
				width: 50px;
				height: 30px;
				cursor: pointer;
				text-align: center;
				line-height: 30px;
			}
			
			.panel {
				margin-bottom: 30px;
			}
			
			.tab-item.active {
				border-bottom: 1px solid #ccc;
			}
			
			.panel {
				display: none;
				border: 1px solid #ccc;
				min-height: 100px;
				padding: 10px;
				width: 300px;
				margin-top: 5px;
			}
			
			#container2 .tab-list {
				width: 56px;
				float: left;
			}
			
			#container2 .tab-item.active {
				border-bottom: none;
				background: #ccc;
			}
			
			#container2 .panel {
				margin-left: 56px;
			}
		</style>
	</head>

	<body>

		<div id="container1">
			<ul class=tab-list>
				<li class="tab-item" href="panel-1">tab1</li>
				<li class="tab-item" href="panel-2">tab2</li>
				<li class="tab-item" href="panel-3">tab3</li>
			</ul>
			<div class="panel" id="panel-1">content1</div>
			<div class="panel" id="panel-2">content2</div>
			<div class="panel" id="panel-3">content3</div>
		</div>

		<div id="container2">
			<ul class="tab-list">
				<li class="tab-item" href="panel-a">tab a</li>
				<li class="tab-item" href="panel-b">tab b</li>
				<li class="tab-item" href="panel-c">tab c</li>
			</ul>
			<div class="panel" id="panel-a">content a</div>
			<div class="panel" id="panel-b">content b</div>
			<div class="panel" id="panel-c">content c</div>
		</div>

		<script type="text/javascript">
			/**
			 * 题目要求：
			 * 实现 Tab 组件，传入容器id，
			 * 规定容器内的有 .tab-item 类名的元素是 Tab 选择器，它的 href 属性对应了要显示内容元素的 id
			 * 点击 Tab 选择器元素会给该选择器增加 active 类名，并且显示对应的内容元素。
			 * .panels 类名的是内容容器，默认隐藏，只会显示当前选择的内容
			 */

			/**
			 * Tab 组件
			 * @param {String} containerId 容器Id
			 */
			function Tab(containerId) {

				this.containerId = containerId;
				var container = this.container = document.getElementById(containerId)

				var tabItems = this.tabItems = container.getElementsByClassName("tab-item")
				var contentItems = container.getElementsByClassName("panel")

				// 按顺序保存tab 和 content 的对应关系
				this.tabGroup = []

				for(var i = 0, len = tabItems.length; i < len; i++) {

					var item = tabItems[i]
					var href = item.getAttribute("href");

					item.orientClass = item.className

					item.itemIndex = i

					var tabGroup = {
						tabItem: item
					}

					for(var j = 0, lenj = contentItems.length; j < lenj; j++) {

						var itemj = contentItems[j]

						if(itemj.id == href) {

							tabGroup.contentItem = itemj

							this.tabGroup.push(tabGroup)

							break;
						}
					}

				}

				this.listener()

				this.currentIndex = -1

			}

			var TabPro = Tab.prototype

			/**
			 * active 方法，可以控制第几个 Tab 组件显示
			 * @param {Number} index 要显示的 tab 的序号，从0开始
			 */
			TabPro.active = function(index) {

				if(typeof index == "undefined") {
					throw Error("tab.active 参数都没有，搞什么鬼.....")
				}
				
				console.log(index,this.currentIndex)

				if(this.currentIndex == index) return

				this.currentIndex = index
				var tabGroup = this.tabGroup

				for(var i = 0, len = tabGroup.length; i < len; i++) {

					var item = tabGroup[i]
					var itemTab = item.tabItem
					var itemContent = item.contentItem
					
					if(i == index){
						
						// 显示当前
						itemTab.className.indexOf("active") === -1 && (itemTab.className += " active")
						itemContent.style.display = "block"
						
						continue;
					}

					// 隐藏其他
					itemTab.className.indexOf("active") !== -1 && (itemTab.className = itemTab.orientClass)
					itemContent.style.display = "none"

				}

			}

			// 绑定事件
			TabPro.listener = function() {

				// 绑定事件
				this.container.addEventListener("click", (e) => {
					
					var target = e.target
					
					if(target.className.indexOf("tab-item")>-1){
						
						var index = target.itemIndex
	
						this.active(index)
					}

				})
			}

			var tab = new Tab('container1');

			tab.active(2);

			var tab2 = new Tab('container2');
		</script>

	</body>

</html>